<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">团房散购通道</nut-navbar>
    <div class="container">
      <nut-tab class="tab" @tab-switch="tabSwitch">
        <nut-tab-panel tabTitle="进行中">
          <div class="list" v-if="list1.length > 0">
            <div class="item m-b-10" v-for="(item, index) in list1" :key="index">
              <div class="box dis-flex just-con-s-b" @click="goShare(item.id, item.state)">
                <div class="left dis-flex">
                  <div class="icon flex-sh-0 m-r-10">
                    <img class="w-100 h-100" :src="item.activity_icon" />
                  </div>
                  <div class="info dis-flex just-con-s-b c-yellow text-left">
                    <div class="nowrap-ellipsis f-s-14">{{item.activity_title}}</div>
                    <div>类型：{{item.typeName}}</div>
                    <div>报名：{{item.applicantsNum || 0}}人</div>
                  </div>
                </div>
                <div class="right dis-flex just-con-s-b flex-sh-0">
                  <div class="state c-fff">进行中</div>
                  <div :class="`triangle ${ item.show ? 'triangle-top' : 'triangle-bottom' }`"
                       @click.stop="openDetail(1, index, item.id)" v-if="item.is_room"></div>
                </div>
              </div>
              <div class="details" v-if="item.show && item.is_room">
                <div class="line dis-flex just-con-s-b text-center l-h-30">
                  <div class="cell text-center">日期</div>
                  <div class="cell text-center" v-for="(v, i) in roomInfo[0].list" :key="i">{{v.room_title}}</div>
                </div>
                <div class="line dis-flex just-con-s-b text-center l-h-30" v-for="(roomInfoItem, roomInfoIndex) in roomInfo" :key="roomInfoIndex">
                  <div class="cell text-center date">{{roomInfoItem.date}}</div>
                  <div class="cell text-center radius" v-for="(v, i) in roomInfoItem.list" :key="i">余{{v.num}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="text-center m-t-20" v-else>暂无数据</div>
        </nut-tab-panel>
        <nut-tab-panel tabTitle="往期">
          <div class="list" v-if="list2.length > 0">
            <div class="item m-b-10" v-for="(item, index) in list2" :key="index">
              <div class="box dis-flex just-con-s-b" @click="goShare(item.id, item.state)">
                <div class="left dis-flex">
                  <div class="icon flex-sh-0 m-r-10">
                    <img class="w-100 h-100" :src="item.activity_icon" />
                  </div>
                  <div class="info dis-flex just-con-s-b c-yellow text-left">
                    <div class="nowrap-ellipsis f-s-14">{{item.activity_title}}</div>
                    <div>类型：{{item.typeName}}</div>
                    <div>报名：{{item.applicantsNum || 0}}人</div>
                  </div>
                </div>
                <div class="right dis-flex just-con-s-b flex-sh-0">
                  <div class="state c-fff">进行中</div>
                  <div :class="`triangle ${ item.show ? 'triangle-top' : 'triangle-bottom' }`"
                       @click.stop="openDetail(2, index, item.id)"></div>
                </div>
              </div>
              <div class="details" v-if="item.show">
                <div class="line dis-flex just-con-s-b text-center l-h-30">
                  <div class="cell text-center">日期房型</div>
                  <div class="cell text-center">{{teamActivity.room_title}}</div>
                </div>
                <div class="line dis-flex just-con-s-b text-center l-h-30" v-for="(roomInfoItem, roomInfoIndex) in roomInfo" :key="roomInfoIndex">
                  <div class="cell text-center date">{{roomInfoItem.date}}</div>
                  <div class="cell text-center radius" v-for="(v, i) in roomInfoItem.list" :key="i">余{{v.num}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="text-center m-t-20">暂无数据</div>
        </nut-tab-panel>
      </nut-tab>
      <router-link class="bottom dis-block c-fff text-center l-h-40" to="/apply">申请团房通道</router-link>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { getListApi, getDetailsByIdApi } from '../../api/record'
  import { IconUrl } from '../../utils/auxiliary'

  export default {
    data () {
      return {
        list1: [],
        list2: [],
        teamActivity: [],
        roomInfo: []
      }
    },
    computed: {
      ...mapGetters([ 'userInfo' ])
    },
    created () {
      if (this.userInfo.salesman !== 2 && this.userInfo.salesman !== 9) {
        this.$router.replace('/')
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      tabSwitch (index, event) {
        console.info(index + '--' + event.target)
      },
      async getData () {
        const list1 = await getListApi({ state: 2, salesman: this.userInfo.userId })
        const list2 = await getListApi({ state: 1, salesman: this.userInfo.userId })
        this.list1 = list1.map(v => {
          return {...v, ...{ activity_icon: v.activity_icon ? IconUrl(v.activity_icon) : '', show: false }}
        })
        this.list2 = list2.map(v => {
          return {...v, ...{ activity_icon: v.activity_icon ? IconUrl(v.activity_icon) : '', show: false }}
        })
      },
      goShare (id, state) {
        if (state !== '2') {
          this.$toast.fail('此活动暂未通过审核！')
        } else {
          this.$router.push(`/share?activityId=${id}`)
        }
      },
      async openDetail (type, index, activityId) {
        const { activityById, roominfo } = await getDetailsByIdApi({ activityId })
        this.teamActivity = activityById
        this.roomInfo = roominfo.sort((a,b) => { return moment(a.date) - moment(b.date) })
        if (type === 1) {
          this.list1[index].show = !this.list1[index].show
        } else {
          this.list2[index].show = !this.list2[index].show
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .tab {
    >>> .nut-tab {
      padding: 10px 0;
      border: none;
      background: none;
    }
    >>> .nut-tab-item {
      height: auto;
      min-height: 200px;
      padding: 10px 0;
    }
    .list {
      .item {
        .box {
          padding: 10px;
          box-sizing: border-box;
          background: #1B1B1B;
          .left {
            width: 88%;
            .icon {
              width: 60px;
              height: 60px;
            }
            .info {
              flex-direction: column;
              width: 70%;
            }
          }
          .right {
            flex-direction: column;
            .triangle {
              width: 0;
              height: 0;
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
              margin: 0 auto 5px;
            }
            .triangle-top {
              border-bottom: 8px solid #ddd;
            }
            .triangle-bottom {
              border-top: 8px solid #ddd;
            }
          }
        }
        .details {
          padding: 5px;
          box-sizing: border-box;
          background-color: #F0F0F0;
          .cell {
            width: 25%;
          }
        }
        .invalid {
          background: #434343;
        }
      }
    }
  }
  .bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #B29462;
  }
  @media screen and (min-width: 900px) {
    .bottom {
      width: 400px;
      margin: 0 auto
    }
  }
</style>
